<!DOCTYPE>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
    <link href="../../static/css/bootstrap.min.css" th:src="@{/static/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../../static/lib/jquery.raty/jquery.raty.css" th:src="@{/static/lib/jquery.raty/jquery.raty.css?v=20190517}" rel="stylesheet"/>
    <link href="../../static/css/pcp_index.css" th:src="@{/static/css/pcp_index.css?v=20190517}" rel="stylesheet"/>
    <style type="text/css">
        #exp {
            margin-top: 10px;
        }
    </style>
</head>
<body>
<input type="hidden" id="personId" th:value="${studentInfo.personId}"/>
<input type="hidden" id="studentLogin" th:value="${studentInfo.loginName}"/>
<input type="hidden" id="lessonStart" th:value="${lessonStart}"/>
<input type="hidden" id="pcpDownloadCount" th:value="${studentInfo.pcpDownloadCount}"/>
<div class="container-box">
    <div class="content">
        <div class="head clearfix">
            <div class="head_l"><img class="head_l_img" src="../../static/img/pcp/logo.png"></div>
            <div class="head_r">
                <div class="cnTit">个性化课程计划</div>
                <div class="enTit">Personal&nbsp;Course&nbsp;Plan</div>
            </div>
        </div>
        <div class="personalInfo">
            <div class="personalInfo_tit">
                <div>
                    <b>个人信息</b> Personal&nbsp;information
                </div>
                <img src="../../static/img/pcp/pic.png" alt="pic" class="icon_people"/>
            </div>
            <div class="personalInfo_con">
                <div class="info">
                    <div class="item"><img class="item_img" src="../../static/img/pcp/icon_name.png"> 姓&emsp;&emsp;&nbsp;名 <span th:text="${studentInfo.cnName}">张小明</span></div>
                    <div class="item"><img class="item_img" src="../../static/img/pcp/icon_EnName.png"> 英&nbsp;&nbsp;文&nbsp;&nbsp;名 <span class="enName" th:text="${studentInfo.enName}"></span></div>
                    <div class="item"><img class="item_img" src="../../static/img/pcp/icon_grade.png"> 年&emsp;&emsp;&nbsp;级 <span th:text="${studentInfo.grade}"></span></div>
                </div>
                <div class="info">
                    <div class="item"><img class="item_img" src="../../static/img/pcp/icon_PhoneNumber.png"> 手&nbsp;&nbsp;机&nbsp;&nbsp;号 <span class="phone" th:text="${studentInfo.phone}"></span></div>
                    <div class="item"><img class="item_img" src="../../static/img/pcp/icon_time.png"> 体验时间 <span class="time" th:text="${#dates.format(studentInfo.releaseTime, 'yyyy-MM-dd HH:mm')}">2019.02.18</span></div>
                    <div class="item" id="exp"></div>
                </div>
                <div class="kunnan"><img class="item_img" th:src="@{/static/img/pcp/icon_trouble.png}"/> <b>学习困难</b></div>
                <div class="text">
                    <div id="diffDiv" style="min-height: 100px;" th:utext="${studentInfo.learningDifficulty}"></div>
                    <textarea id="diffTextarea" th:utext="${studentInfo.learningDifficulty}" class="form-control" style="display: none;" rows="5" maxlength="1000">
                        在家学习很少,有报英语数学语文的培训班,妈妈说不是最注重孩子的成绩,希望提升孩子的实际应用能力,线下一周一次,一次2个小时,一对多。孩子自己觉得不会写单词
                    </textarea>
                </div>
            </div>
        </div>
        <div class="learnPlan">
            <div class="learnPlan_tit">
                <b>学习计划</b> Learning&nbsp;plan
            </div>
            <div class="learnPlan_con">
                <div class="info1 clearfix">
                    <div class="item"><img class="item_img" src="../../static/img/pcp/icon_proposal.png"> 建议学习课程类别</div>
                    <div class="item dropdown" id="app1">
                        <span class="dropdown-toggle line classType1" id="dropdownMenu1" data-toggle="dropdown" style="width: 100%;text-align: left;">请选择一级分类</span>
                        <img class="arrow_img" src="../../static/img/pcp/arrow.png" th:src="@{/static/img/pcp/arrow.png}">
                        <ul class="dropdown-menu dropdownMenu1" role="menu" aria-labelledby="dropdownMenu1" v-if="dataList1.length" style="overflow-y: auto;min-width: 200px;">
                            <!--<li role="presentation" th:each="list:${firstLevelTextList}">
                                <span role="menuitem" tabindex="-1" th:value="${list.id}" th:text="${list.name}"></span>
                            </li>-->
                            <li v-for="(item, index) in dataList1" role="presentation" @click="putChildList(item)">
                                <span role="menuitem" tabindex="-1" value="{{item.id}}">{{item.name}}</span>
                            </li>
                        </ul>
                    </div>
                    <div class="item dropdown" id="app2">
                        <span class="dropdown-toggle line classType2" id="dropdownMenu2" data-toggle="dropdown" style="width: 100%;text-align: left;">请选择二级分类</span>
                        <img class="arrow_img" src="../../static/img/pcp/arrow.png" th:src="@{/static/img/pcp/arrow.png}">
                        <ul class="dropdown-menu dropdownMenu2" role="menu" aria-labelledby="dropdownMenu2" v-if="dataList2.length" style="overflow-y: auto;min-width: 200px;">
                            <li role="presentation" v-for="(item, index) in dataList2" @click="putChildList(item,'dropdownMenu2')">
                                <span role="menuitem" tabindex="-1" value="{{item.id}}">{{item.name}}</span>
                            </li>
                        </ul>
                    </div>

                </div>
                <div class="info">
                    <div class="item" style="opacity: 0;width: 221px;"><img class="item_img" src="../../static/img/pcp/icon_proposal.png"> 建议学习课程类别</div>
                    <div class="item dropdown" id="app3" style="margin-right: 10px;">
                        <span class="dropdown-toggle line classType3" id="dropdownMenu3" data-toggle="dropdown" style="width: 100%;text-align: left;">请选择三级分类</span>
                        <img class="arrow_img" src="../../static/img/pcp/arrow.png" th:src="@{/static/img/pcp/arrow.png}">
                        <ul class="dropdown-menu dropdownMenu3" role="menu" aria-labelledby="dropdownMenu3" style="height: 250px;overflow-y: auto;width: 100%;">
                            <li>
                                <input type="text" style="width: 90%;margin: 5%;" v-model="keyword3" placeholder="搜索三级分类"/>
                            </li>
                            <li role="presentation" v-for="(item, index) in dataList3" @click="putChildList(item,'dropdownMenu3')"
                                class="list-item">
                                {{item.name}}
                                <!--<span role="menuitem" tabindex="-1" :value="{{item.id}}">{{item.name}}</span>-->
                            </li>
                        </ul>
                    </div>
                    <div class="item dropdown" id="app4">
                        <span class="dropdown-toggle line classType4" id="dropdownMenu4" data-toggle="dropdown" style="width: 100%;text-align: left;">请选择教材</span>
                        <img class="arrow_img" src="../../static/img/pcp/arrow.png" th:src="@{/static/img/pcp/arrow.png}">
                        <ul class="dropdown-menu dropdownMenu4" role="menu" aria-labelledby="dropdownMenu4" style="width: 100%;height: 250px;overflow-y: auto">
                            <li>
                                <input type="text" style="width: 90%;margin: 5%;" v-model="keyword4" placeholder="搜索教材"/>
                            </li>
                            <!--<li role="presentation" v-for="(item, index) in dataList4" @click="putChildList(item)">-->
                            <!--<span role="menuitem" tabindex="-1" value="{{item.id}}">{{item.name}}</span>-->
                            <!--</li>-->
                            <li v-for="(item, index) in dataList4" @click="putChildList(item)"
                                class="list-item">
                                {{item.name}}
                                <!--<span tabindex="-1" :value="{{item.id}}">{{item.name}}</span>-->
                            </li>
                        </ul>
                        <!--
                        <ul class="dropdown-menu dropdownMenu4" role="menu" aria-labelledby="dropdownMenu4" v-else>
                            <li role="presentation">
                                <span role="menuitem" tabindex="-1" value="0">暂无数据</span>
                            </li>
                        </ul>
                        -->
                    </div>
                </div>
                <div class="info info2">
                    <div class="item">
                        <div class="dropdown_box">
                            <div class="info2_item"><img class="item_img" src="../../static/img/pcp/icon_PackageName.png"> 套餐名称</div>
                            <div class="info2_item2 dropdown" id="app5">
                                <span class="dropdown-toggle line taocan type1" id="dropdownMenu5" style="width: auto" data-toggle="dropdown">--请选择套餐--</span>
                                <img class="arrow_img" src="../../static/img/pcp/arrow.png" th:src="@{/static/img/pcp/arrow.png}">
                                <ul class="dropdown-menu dropdownMenu5" role="menu" aria-labelledby="dropdownMenu5" style="overflow-y: auto;height: 250px">
                                    <li>
                                        <input type="text" style="width: 90%;margin: 5%;" v-model="keyword5" placeholder="搜索套餐"/>
                                    </li>
                                    <!--
                                    <li role="presentation" th:each="list:${ordersList}">
                                        <span role="menuitem" th:attr="price=${list.price},classCount=${list.classCount},serviceContent=${list.serviceContent}" tabindex="-1" th:text="${list.name}">钻石套餐</span>
                                    </li>
                                    -->
                                    <li role="presentation" v-for="(item, index) in dataList5">
                                        <span role="menuitem" @click="onPackageChange(item)" price="{{item.price}}" classCount="{{item.classCount}}" serviceContent="{{item.serviceContent}}" tabindex="-1">{{item.name}}</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="dropdown_box">
                            <div class="info2_item"><img class="item_img" src="../../static/img/pcp/icon_cycle.png"> 学习周期</div>
                            <div class="info2_item2 dropdown">
                                <span class="dropdown-toggle line zhouqi type3" id="dropdownMenu7" data-toggle="dropdown">--选择学习周期--</span>
                                <img class="arrow_img" src="../../static/img/pcp/arrow.png" th:src="@{/static/img/pcp/arrow.png}">
                                <ul class="dropdown-menu dropdownMenu7" role="menu" aria-labelledby="dropdownMenu7">
                                    <li role="presentation" value="12">
                                        <span role="menuitem" tabindex="-1">3个月</span>
                                    </li>
                                    <li role="presentation" value="12">
                                        <span role="menuitem" tabindex="-1">6个月</span>
                                    </li>
                                    <li role="presentation" value="12">
                                        <span role="menuitem" tabindex="-1">1年</span>
                                    </li>
                                    <li role="presentation" value="12">
                                        <span role="menuitem" tabindex="-1">2年</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="info info2">
                    <div class="item">
                        <div class="dropdown_box">
                            <div class="info2_item"><img class="item_img" src="../../static/img/pcp/icon_ClassCoin.png"> 所含课程</div>
                            <div class="info2_item2 dropdown">
                                <span class="dropdown-toggle line time type2" id="dropdownMenu6" data-toggle="dropdown"></span>
                                <img class="arrow_img" src=".../../static/img/pcp/arrow.png" th:src="@{/static/img/pcp/arrow.png}">
                                <input type="hidden" id="classNum1" value="0">
                            </div>
                        </div>
                        <div class="info" style="margin-left: 130px;padding-bottom: 0px;">
                            <div class="info2_item2 dropdown">
                                <span class="dropdown-toggle line time dropdownMenu16" id="dropdownMenu16" data-toggle="dropdown"></span>
                                <img class="arrow_img" src=".../../static/img/pcp/arrow.png" th:src="@{/static/img/pcp/arrow.png}">
                                <input type="hidden" id="classNum2" value="0">
                                <ul class="dropdown-menu dropdownMenu16" role="menu" aria-labelledby="dropdownMenu16">
                                    <li role="presentation" value="24">
                                        <span role="menuitem" tabindex="-1">学管师课24节</span>
                                    </li>
                                    <li role="presentation" value="12">
                                        <span role="menuitem" tabindex="-1">学管师课12节</span>
                                    </li>
                                    <li role="presentation" value="9">
                                        <span role="menuitem" tabindex="-1">学管师课9节</span>
                                    </li>
                                    <li role="presentation" value="6">
                                        <span role="menuitem" tabindex="-1">学管师课6节</span>
                                    </li>
                                    <li role="presentation" value="3">
                                        <span role="menuitem" tabindex="-1">学管师课3节</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="info" style="margin-left: 130px;padding-bottom: 0px;">
                            <div class="info2_item2 dropdown">
                                <span class="dropdown-toggle line time" id="dropdownMenu18" data-toggle="dropdown"></span>
                                <img class="arrow_img" src=".../../static/img/pcp/arrow.png" th:src="@{/static/img/pcp/arrow.png}">
                                <input type="hidden" id="classNum3" value="0">
                                <ul class="dropdown-menu dropdownMenu18" role="menu" aria-labelledby="dropdownMenu18">
                                    <li role="presentation" value="12">
                                        <span role="menuitem" tabindex="-1">家长会12节</span>
                                    </li>
                                    <li role="presentation" value="3">
                                        <span role="menuitem" tabindex="-1">家长会3节</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="info" style="margin-left: 65px;padding-bottom: 0px;">
                            <div class="info2_item" style="padding-top: 10px">总课时：</div>
                            <div class="info2_item2 dropdown">
                                <span class="dropdown-toggle line time" id="dropdownMenu19" data-toggle="dropdown">0</span>

                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <img class="item_img" src="../../static/img/pcp/icon_Discount.png"> 参与优惠活动
                        <div id="apply" th:if="${scholarship==true}" class="btn_j">申请奖学金</div>
                        <div class="info" id="paymentByDate" style="margin-top: 20px">
                            <div class="info2_item"><img class="item_img" src="../../static/img/pcp/icon_ClassCoin.png">
                                <input value="当天报名赠币">:<input id="giveaway" value="30" style="width: 50px">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="info info2">
                    <div class="item" id="app6">
                        <img class="item_img" src="../../static/img/pcp/icon_tuition.png"> 学&emsp;&emsp;费 <span><input id="tuition" type="text" v-model="totals" :value="total"></span>
                        <span id="fenqiInfo">
                                (首付<span><input id="downPayments" type="text" v-model="firstpay" :value="firstpay"></span>元，月供<span><input id="monthlySupply" type="text" :value="fenqis" readonly></span>元)
                            </span>
                        <div id="totalMoney" class="btn_j">全款</div>
                    </div>
                </div>
                <div class="fuwu"><img class="item_img" src="../../static/img/pcp/icon_service.png"> <b>增值服务</b></div>
                <div class="fuwu_con">
                    <div class="fuwu_con_item" id="serviceContent">
                    </div>
                </div>
                <div class="footTips">学校课本同步，全职外教1对1，线上线下相结合，实现360°提分+提能。</div>
            </div>
        </div>
        <div class="website">www.etalk365.com<div style="float: right;"><small style="font-size: small;padding-right: 20px;" th:text="${session.enName+'     '+ #dates.format(#dates.createNow(),'yyyy-MM-dd H:m:s')}"></small></div></div>
    </div>
    <div class="loading">
        <img src="../../static/img/pcp/loding.png"/>
        <div>正在下载中...</div>
    </div>
</div>
<div class="downloadedPDF"><span id="renderPdf">生成PDF</span><span style="margin-left: 20px;" onclick="openRecord()">查看历史记录</span></div>

<div id="layer-photos-demo" class="layer-photos-demo" style="display:none;">
    <img th:each="item:${listImg}" th:layer-src="${'https://hnres.etalk365.com'+item}" alt="图片">
</div>

<script type="text/javascript" src="../../static/js/jquery.js" th:src="@{/static/js/jquery.js}"></script>
<script type="text/javascript" src="../../static/js/bootstrap.min.js" th:src="@{/static/js/bootstrap.min.js}"></script>
<script type="text/javascript" src="../../static/js/html2canvas.js" th:src="@{/static/js/html2canvas.js}"></script>
<script type="text/javascript" src="../../static/js/jsPdf.debug.js" th:src="@{/static/js/jsPdf.debug.js}"></script>
<script type="text/javascript" src="../../static/js/vue.min.js" th:src="@{/static/js/vue.min.js}"></script>
<script type="text/javascript" src="../../static/lib/jquery.raty/jquery.raty.js"></script>
<script src="https://hnres.etalk365.com/public/lib/layer/layer.js"></script>
<script type="text/javascript">
    // 教材一级分类
    var app1 = new Vue({
        el: '#app1',
        data: {
            show: false, // 获取焦点
            text: '',
            loading: true,
            dataList1: [ /** @description 教材一级分类 */
            ],
        },
        methods: {
            putChildList(item) {
                getTextBookList(item.id, "dropdownMenu2");
                $(".classType1").html(item.name);
            },
        }
    })

    // 教材二级分类
    var app2 = new Vue({
        el: '#app2',
        data: {
            show: false, // 获取焦点
            text: '',
            loading: true,
            dataList2: [ /** @description 教材二级分类 */
            ],
        },
        methods: {
            putChildList(item) {
                getTextBookList(item.id, "dropdownMenu3");
                $(".classType2").attr("value", item.id);
                $(".classType2").html(item.name);
            },
        }
    })

    // 教材三级分类
    var app3 = new Vue({
        el: '#app3',
        data: {
            show: false, // 获取焦点
            text: '',
            loading: true,
            keyword3: '',
            dataList3: [ /** @description 教材三级分类 */
            ],
        },
        watch: {
            keyword3: function (val) {
                console.log("classType2 val=>", $(".classType2").attr("value"));
                getTextBookList($(".classType2").attr("value"), "dropdownMenu3", val);
            }
        },
        methods: {
            putChildList(item) {
                getTeachingMaterialList(item.id);
                $(".classType3").attr("value", item.id);
                $(".classType3").html(item.name);
            },
        }
    })

    // 教材列表
    var app4 = new Vue({
        el: '#app4',
        data: {
            show: false, // 获取焦点
            text: '',
            loading: true,
            keyword4: '',
            dataList4: [ /** @description 教材列表 */
            ],
        },
        watch: {
            keyword4: function (val) {
                console.log("classType3 val=>", $(".classType3").attr("value"));
                getTeachingMaterialList($(".classType3").attr("value"), val);
            }
        },
        methods: {
            putChildList(item) {
                $(".classType4").html(item.name);
            },
        }
    })

    // 套餐列表
    var app5 = new Vue({
        el: '#app5',
        data: {
            show: false, // 获取焦点
            text: '',
            loading: true,
            keyword5: '',
            dataList5: [ /** @description 套餐列表 */
            ]
        },
        watch: {
            keyword5: function (val) {
                getPackageInfoList(val)
            }
        }
    });

    // 学费金额
    var app6 = new Vue({
        el: "#app6",
        data: {
            originalTotal: 0,
            total: 0,
            totals:0,
            firstpay: 0,
            firstpays: 0,
            fenqi: 0,
            fenqis: 0
        },
        watch: {
            total: function (val) {
                console.log("total=>" + val);
                app6.totalChange(val);
            },
            firstpay: function (val) {
                console.log("firstpay=>" + val)
                app6.firstpay=uformat(val);
                var last = 12;
                var res = (app6.total - app6.firstpay) / last;
                app6.fenqi = (res <= 0 ? 0 : Math.ceil(res * 100) / 100);
                app6.fenqis = format(app6.fenqi);
                app6.firstpay=format(app6.firstpay);
            }
        },
        methods: {
            totalChange(val) {
                app6.firstpay = val * 0.1;
                var last = 12;
                var res = (val - app6.firstpay) / last;
                app6.fenqi = res <= 0 ? 0 : Math.ceil(res * 100) / 100;
                app6.fenqis = format(app6.fenqi);
            }
        }
    });

    $(function () {
        $("#diffDiv").html($("#diffDiv").html().replace(/\n/g, "<br/>"));

        $("#diffDiv").mouseenter(function () {
            $("#diffTextarea").show();
            $(this).hide();
        }).mouseout(function () {
            $("#diffTextarea").hide();
            $(this).show();
        });

        $("#diffTextarea").mouseenter(function () {
            $("#diffDiv").hide();
            $(this).show();
        }).mouseout(function () {
            $("#diffDiv").html($(this).val().replace(/\n/g, "<br/>")).show();
            $(this).hide();
        });

        // 评分
        var rateNum = $("#lessonStart").val();
        $("#exp").raty({
            readOnly: true,
            hints: ['差', '一般', '好', '非常好', '全五星'],
            number: 5,
            score: rateNum,
        });

        // 下拉
        // 课程币
        $(".dropdownMenu6 li").click(function () {
            $(".type2").html($(this).text());
            totalClassCount();
        })
        // 学习周期
        $(".dropdownMenu7 li").click(function () {
            // console.log($(this).attr("value"));
            $(".type3").html($(this).text());
        })

        $(".dropdownMenu16 li").click(function () {
            // console.log($(this).attr("value"));
            $("#dropdownMenu16").html($(this).text());
            $("#classNum2").val($(this).val());
            totalClassCount();
        })

        $(".dropdownMenu17 li").click(function () {
            // console.log($(this).attr("value"));
            $("#dropdownMenu17").html($(this).text());
        })

        $(".dropdownMenu18 li").click(function () {
            // console.log($(this).attr("value"));
            $("#dropdownMenu18").html($(this).text());
            $("#classNum3").val($(this).val());
            totalClassCount();
        })
        //赠送数据变化重新计算总课时
        $("#giveaway").blur(function (){
            totalClassCount();
        });
        // 初始化数据
        //一级分类
        getFirstLevelTextBookList();

        // 初始化套餐信息数据
        getPackageInfoList();
    })

    function totalClassCount() {
        let classNum1=$("#classNum1").val();
        let classNum2=$("#classNum2").val();
        let classNum3=$("#classNum3").val();
        $("#dropdownMenu19").text(parseInt(classNum1)+parseInt(classNum2)+parseInt(classNum3)+parseInt($("#giveaway").val()===""?"0":$("#giveaway").val()));
    }
    /**
     * 校验只要是数字（包含正负整数，0以及正负浮点数）就返回true
     **/
    function isNumber(val) {
        var regPos = /^\d+(\.\d+)?$/; //非负浮点数
        var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数
        if (regPos.test(uformat(val)) || regNeg.test(uformat(val))) {
            return true;
        } else {
            return false;
        }
    }

    // 下载PDF
    var downPdf = document.getElementById("renderPdf");
    downPdf.onclick = function () {
        if ($("#dropdownMenu1").text().trim() == '请选择一级分类') {
            layer.msg("请选择一级分类", {
                offset: '50%',
                icon: 2
            });
            return;
        }
        if ($("#dropdownMenu2").text().trim() == '请选择二级分类') {
            layer.msg("请选择二级分类", {offset: '50%', icon: 2});
            return;
        }
        if ($("#dropdownMenu3").text().trim() == '请选择三级分类') {
            layer.msg("请选择三级分类", {offset: '50%', icon: 2});
            return;
        }
        if ($("#dropdownMenu4").text().trim() == '请选择教材') {
            layer.msg("请选择教材", {offset: '50%', icon: 2});
            return;
        }
        if ($("#tuition").val().trim() == '0') {
            layer.msg("请选择套餐", {offset: '50%', icon: 2});
            return;
        }
        if ($("#dropdownMenu7").text().trim() == '--选择学习周期--') {
            layer.msg("请选择学习周期", {offset: '50%', icon: 2});
            return;
        }
        if ($("#downPayments").val() == '') {
            layer.msg("请输入首付金额", {offset: '50%', icon: 2});
            $("#downPayments").val("").focus();
            return;
        }

        if (isNumber($("#downPayments").val()) == false) {
            layer.msg("请输入正确格式首付金额", {offset: '50%', icon: 2});
            $("#downPayments").val("").focus();
            return;
        }

        if ($("#monthlySupply").val() == '') {
            layer.msg("请输入月供金额", {offset: '50%', icon: 2});
            $("#monthlySupply").val("").focus();
            return;
        }

        if (isNumber($("#monthlySupply").val()) == false) {
            layer.msg("请输入正确格式月供金额", {offset: '50%', icon: 2});
            $("#monthlySupply").val("").focus();
            return;
        }

        // 保存学习困难信息以及PDF生成次数
        // 并发送附件动态
        var savePcpInfo = function (pageData) {
            // console.log("pageData=>", pageData);
            $.ajax({
                type: 'post',
                url: '/PcpCtl/savePcpInfo',
                data: {
                    pageData: pageData.replace("data:image/jpeg;base64,", ""),
                    personId: $("#personId").val(),
                    studentLogin: $("#studentLogin").val(),
                    learningDifficulty: $("#diffTextarea").val(),
                    currentPcpDownloadCount: parseInt($("#pcpDownloadCount").val()) + 1
                },
                cache: false,
                async: false,
                dataType: 'json',
                success: function (data) {
                    if (data.code == 1) {
                        console.log("success")
                    } else {
                        layer.msg("未知错误，请联系管理员", {offset: '50%', icon: 2});
                    }
                },
                error: function () {
                    layer.msg("网络异常", {offset: '50%', icon: 2});
                }
            });
        };

        // 生成PDF
        html2canvas(document.querySelector(".container-box"), {
            scale: 2,
            useCORS: true,
            onrendered: function (canvas) {
                var contentWidth = canvas.width;
                var contentHeight = canvas.height;
                //一页pdf显示html页面生成的canvas高度;
                var pageHeight = contentWidth / 595.28 * 841.89;
                //未生成pdf的html页面高度
                var leftHeight = contentHeight;
                //pdf页面偏移
                var position = 0;
                //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
                var imgWidth = 555.28;
                var imgHeight = 555.28 / contentWidth * contentHeight;

                var pageData = canvas.toDataURL('image/jpeg', 1.0);
                // 保存信息并发送附件动态
                savePcpInfo(pageData);

                var pdf = new jsPDF('', 'pt', 'a4');
                // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                // pdf.addImage(pageData, 'JPEG', 20, 0, imgWidth, imgHeight);
                // 当内容未超过pdf一页显示的范围，无需分页
                if (leftHeight < pageHeight) {
                    pdf.addImage(pageData, 'JPEG', 20, 0, imgWidth, imgHeight );
                } else {
                    while(leftHeight > 0) {
                        pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)
                        leftHeight -= pageHeight;
                        position -= 841.89;
                        //避免添加空白页
                        if(leftHeight > 0) {
                            pdf.addPage();
                        }
                    }
                }
                pdf.save('content.pdf');
            }
        })
    }

    //申请奖学金
    $("#apply").click(function () {
        var totalPrice = parseInt($("#tuition2").text().trim());
        // 还原
        if ($(this).text() == "已申请奖学金") {
            app6.total = app6.originalTotal;
            app6.totals = format(app6.originalTotal);

            $(this).text("申请奖学金");
            $(this).css("background", "-webkit-linear-gradient(left, rgb(254, 211, 45), rgb(254, 151, 8))");
            return;
        }

        // ====================
        // 开始申请处理
        // ====================
        if ($("#tuition").val().trim() == '0') {
            layer.msg("请选择套餐", {offset: '50%', icon: 2});
            return;
        }

        if ($("#dropdownMenu7").text().trim() == '--选择学习周期--') {
            layer.msg("请选择学习周期", {offset: '50%', icon: 2});
            return;
        }

        if (parseInt($("#dropdownMenu6").text()) < 120) {
            layer.msg("课程币小于120的套餐不参与本次优惠", {offset: '50%', icon: 2});
            return;
        }
        if ($("#dropdownMenu7").text().trim() == '3个月') {
            layer.msg("3个月没有优惠(⊙o⊙)…", {offset: '50%', icon: 2});
            return;
        }
        if ($("#dropdownMenu7").text().trim() == '6个月') {
            layer.msg("6个月没有优惠(⊙o⊙)…", {offset: '50%', icon: 2});
            return;
        }

        //学习周期1年减免1800
        if ($("#dropdownMenu7").text().trim() == '1年') {
            app6.total = app6.originalTotal - 1800;
            app6.totals =format(app6.total)
        }
        //学习周期2年减免3600
        if ($("#dropdownMenu7").text().trim() == '2年') {
            app6.total = app6.originalTotal - 3600;
            app6.totals =format(app6.total)
        }
        $(this).text("已申请奖学金");
        $(this).css("background", "-webkit-linear-gradient(left, #87E96A, #66EAD5)");
    });

    // 全款
    $("#totalMoney").click(function () {
        if ($("#tuition").val().trim() == '0') {
            layer.msg("请选择套餐", {offset: '50%', icon: 2});
            return;
        }

        // app6.total = app6.originalTotal;
        $("#fenqiInfo").css("display", "none");
        $(this).css("display", "none");
    });

    // 初始化教材一级分类
    function getFirstLevelTextBookList() {
        $.ajax({
            type: 'post',
            url: '/PcpCtl/getFirstLevelTextBookList',
            data: {},
            cache: false,
            async: false,
            dataType: 'json',
            success: function (data) {
                if (data.code == 1) {
                    app1.dataList1 = data.firstLevelTextList;
                } else {
                    layer.msg("未知错误，请联系管理员", {offset: '50%', icon: 2});
                }
            }
        });
    }

    // 获取教材子分类数据
    function getTextBookList(parentId, menu, keyword) {
        keyword = keyword || '';
        $.ajax({
            type: 'post',
            url: '/PcpCtl/getTextBookList',
            data: {
                'parentId': parentId,
                'keyword': keyword
            },
            cache: false,
            async: false,
            dataType: 'json',
            success: function (data) {
                if (data.code == 1) {
                    var textBookList = data.textBookList;
                    if (menu == 'dropdownMenu2') {
                        app2.dataList2 = textBookList;
                    }
                    if (menu == 'dropdownMenu3') {
                        app3.dataList3 = textBookList;
                    }

                } else {
                    layer.msg("未知错误，请联系管理员", {offset: '50%', icon: 2});
                }
            }
        });
    }

    // 获取教材列表数据
    function getTeachingMaterialList(parentId, keyword) {
        keyword = keyword || '';
        $.ajax({
            type: 'post',
            url: '/PcpCtl/getTeachingMaterialList',
            data: {
                'parentId': parentId,
                'keyword': keyword
            },
            cache: false,
            async: false,
            dataType: 'json',
            success: function (data) {
                if (data.code == 1) {
                    app4.dataList4 = data.teachingMaterialList;
                } else {
                    layer.msg("未知错误，请联系管理员", {offset: '50%', icon: 2});
                }
            }
        });
    }

    // 获取套餐信息数据
    function getPackageInfoList(keyword) {
        keyword = keyword || '';
        $.ajax({
            type: 'post',
            url: '/PcpCtl/getPackageInfoList',
            data: {
                'keyword': keyword
            },
            cache: false,
            async: false,
            dataType: 'json',
            success: function (data) {
                if (data.code == 1) {
                    app5.dataList5 = data.packageInfoList;
                } else {
                    layer.msg("未知错误，请联系管理员", {offset: '50%', icon: 2});
                }
            }
        });
    }

    // 套餐点击事件
    function onPackageChange(item) {
        // console.log("onPackageChange", item);
        $(".type1").html(item.name);

        app6.originalTotal = item.price;
        app6.total = item.price;
        app6.totals =format(app6.total)

        $("#dropdownMenu6").text("外教币"+item.classCount).attr("readonly", true);
        $("#classNum1").val(item.classCount);

        if (item.serviceContent == undefined || item.serviceContent == '') {
            $("#serviceContent").html('');
        } else {
            $("#serviceContent").html(item.serviceContent.replace(/\n/g, "<br/>"));
        }
        //欧美套餐不赠送30币
        if (item.classifyId===257){
            $("#paymentByDate").hide();
            $("#giveaway").val(0);
        }else {
            $("#paymentByDate").show();
            $("#giveaway").val(30);
        }

        totalClassCount();
    }

    function format (num) {
        return (num+ '').replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g,'$1,');
    }
    function uformat(num) {
        return (num+ '').replace(/,/g,'');
    }

    function openRecord() {
        layer.photos({
            photos: '#layer-photos-demo',
            closeBtn: 1,
            // shadeClose:false,
        });
        $("#layer-photos-demo").find("img").eq(0).click();
    }
</script>
</body>
</html>
